<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>博客首页</title>

    <!--侧边栏开始-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
    <!--侧边栏结束-->

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>首页</title>
    <!--引用导航栏css样式-->
    <link rel="stylesheet" href="css/index.css">

    <meta name="robots" content="noindex">

    <link rel="shortcut icon" type="image/x-icon"
          href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    <link rel="mask-icon"
          href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
          color="#111">
    <link rel="canonical" href="https://codepen.io/alphardex/pen/OJNLyOv">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alphardex/aqua.css@1.5.0/dist/aqua.min.css">


    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>

  </head>
  <body>
    <div>
      <!--导航栏开始-->
      <myheader></myheader>
      <!--导航栏结束-->

      <div class="row">
        <!--侧边栏开始-->
        <div class="col-md-3 col-sm-2" style="margin: 50px 0 0 0">
          <div class="page" id="app">
            <div class="nav-left" v-show="navLeftFlag" ref="navLeft">
              <div class="navDiv">
                <div class="navName">侧边栏导航</div>
                <div class="nav-list">
                  <ul>
                    <li class="nav-tab nav-ul">
                      <a href="javascript:void[0]" class="li-a"><i class='bx bx-cog'></i> 维修保养
                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                      <div class="nav-box">
                        <a href="" class="li-a-a" target="iframe">养护计划</a>
                      </div>
                    </li>
                    <li class="nav-tab nav-ul">
                      <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'></i> 巡检管理
                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                      <div class="nav-box">
                        <a href="" class="li-a-a" target="iframe">巡检计划</a>
                      </div>
                    </li>
                    <li class="nav-tab nav-ul">
                      <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 工单管理
                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                      <div class="nav-box">
                        <a href="" class="li-a-a" target="iframe">维修计划</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

          </div>
        </div>
        <!--侧边栏结束-->
        <!--占位开始-->
        <div class="col-md-1 col-sm-1"></div>
        <!--占位结束-->
        <!--内容开始-->
        <div class="col-md-7 col-sm-7" id="postLabelsApp">
          <div id="post_list" class="post-list">
            <div v-for="post in posts">
              <article class="post-item">
                <section class="post-item-body">
                  <div class="post-item-text">
                    <a class="post-item-title" :href="'one_post.html?'+post.id" target="_blank"
                       style="font-size: 28px" v-text="post.title">标题</a>
                    <p class="post-item-summary">
                      <a href="">
                        <img :src="post.url" style="width: 100px" class="avatar" alt="博主头像"/>
                      </a>
                    <div style="width: 600px;height: 85px">
                      <span class="cont">
                          {{post.content}}
                      </span>

                    </div>
                    </p>
                  </div>
                  <footer class="post-item-foot">
                    <a href="" class="post-item-author"><span
                         style="font-size: 18px" v-text="post.nickname">作者</span></a>
                    <span class="post-meta-item">
                    <span style="font-size: 18px" v-text="post.duration">发帖时间</span>
                </span>
                    <a id="digg_control_15470778">
                            <span style="padding-top: 5px" class="resize">
                                <i style="color: #ffc600;left: 27px" class="glyphicon glyphicon-thumbs-up"></i>
                                <i class="glyphicon glyphicon-thumbs-up"></i>{{post.likenum}}</span>
                    </a>
                    <a>
                      <span style="padding-top: 5px" class="resize"><i
                           class="glyphicon glyphicon-comment"></i>{{post.commentnum}}</span>
                    </a>
                    <a>
                      <span style="padding-top: 5px" class="resize"><i
                           class="glyphicon glyphicon-eye-open"></i>{{post.viewnum}}</span>
                    </a>
                    <a>
                      <span style="padding-top: 5px" class="resize"><i
                           class="glyphicon glyphicon glyphicon-folder-open"></i>29</span>
                    </a>

                  </footer>
                </section>
              </article>
              <hr>
            </div>

          </div>
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li>
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <!--内容结束-->





      </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引用导航栏-->
    <script src="js/index_myhead.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

    <script src="js/utils.js"></script>
    <script src="js/index.js"></script>

    <!--侧边栏样式开始-->
    <script src="js/vue.min.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            let navflag = false;
            $('.nav-tab').click(function () {
                $(this).siblings().each(function () {
                    $(this).removeClass('a_active');
                    // $(this).removeClass('a_active');
                    $(this).find('.nav-box').css('height', '0')
                    //关闭右侧箭头
                    if ($(this).attr('class').indexOf('nav-ul') != -1) {
                        $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                        $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                        $(this).removeClass('nav-show')
                        // $(this).find('div').removeClass('nav-box')
                    }
                })
                //当前选中
                $(this).addClass('a_active')
                $(this).find('.li-a').addClass('active')
                // 打开右侧箭头
                $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
                $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                $(this).addClass('nav-show')
                // $(this).find('div').addClass('nav-box')
            })
            /* 二级菜单a点击事件 */
            $(".li-a-a").click(function () {
                $(".li-a-a").each(function () {
                    $(this).removeClass('active-li-a');
                })
                $(this).addClass('active-li-a');
            })

        })
        const vue = new Vue({
            el: '#app',
            data: {
                navLeftFlag: true
            },
            methods: {
                isShowLeft() {
                    if (this.navLeftFlag) {
                        this.$refs.navRight.style.paddingLeft = '0px'
                        this.$refs.cPage.style.left = '0px';
                        this.navLeftFlag = false;
                        // this.$refs.navLeft.style.width = '0px';
                        // setTimeout(()=>{
                        // 	this.navLeftFlag = false;
                        // },200)
                    } else {
                        this.$refs.navRight.style.paddingLeft = '240px';
                        this.$refs.cPage.style.left = '240px';
                        this.navLeftFlag = true;
                        // this.$refs.navLeft.style.width = '240px';
                        // setTimeout(()=>{
                        // 	this.navLeftFlag = true;
                        // },200)
                    }
                }
            }
        })
    </script>
    <!--侧边栏样式结束-->


  </body>
</html>